<template>
  <view class="cu-card article">
    <view
      class="cu-item goods-item bg-white mb32"
      v-for="(item, index) in goodsList"
      :key="index"
    >
      <navigator
        hover-class="none"
        :url="'/pages/goods/goods-detail/index?id=' + item.id"
      >
        <view class="content align-center solid-bottom">
          <view class="image-box">
            <image
              :src="
                item.picUrls[0]
                  ? item.picUrls[0]
                  : '/static/public/img/no_pic.png'
              "
              mode="aspectFill"
              class="row-img"
            ></image>
          </view>
          <view class="margin-left-sm" style="width: 100%">
            <view class="text-black overflow-2">{{ item.name }}</view>
            <view class="text-gray text-sm margin-top-xs overflow-2">{{
              item.sellPoint
            }}</view>
            <view class="flex margin-top-xs align-center">
              <view
                class="cu-tag bg-orange radius sm"
                v-if="item.freightTemplat && item.freightTemplat.type == '2'"
                >包邮</view
              >
              <view
                class="cu-tag line-orange radius sm margin-right-sm"
                v-if="item.pointsGiveSwitch == '1'"
                >积分</view
              >
              <view class="text-gray text-sm"
                >已售{{ item.saleNum ? item.saleNum : "0" }}</view
              >
            </view>
            <view class="flex justify-between margin-top-sm">
              <view class="text-bold text-xl text-price text-scarlet">{{
                item.priceDown ? item.priceDown : "0"
              }}</view>
              <view
                class="round buy text-sm bg-scarlet"
                :style="{backgroundColor:theme.themeColor }"
                ><text>立即购买</text></view
              >
              <!-- :class="'bg-'+theme.themeColor" -->
            </view>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
const app = getApp();

export default {
  data() {
    return {
      CustomBar: this.CustomBar,
      theme: app.globalData.theme, //全局颜色变量
    };
  },

  components: {},
  props: {
    goodsList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {},
};
</script>
<style>
.goods-item {
  padding: 0;
}

.cu-card.article > .cu-item {
  padding-bottom: 0rpx;
}

.cu-card.article > .cu-item .content {
  display: flex;
  padding: 20rpx;
}

.image-box {
  width: 200rpx !important;
  height: 200rpx !important;
}

.row-img {
  width: 200rpx !important;
  height: 200rpx !important;
}

.buy {
  padding: 10rpx 20rpx 10rpx 20rpx;
}
</style>
